<!-- 消息列表-->
<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="发送方式">
          <a-select v-model="queryParam.messageChannel" placeholder="选择发送方式" allowClear>
            <a-select-option
              v-for="item in Dict.getLocal('messageChannelDict')"
              :value="item.dictValue"
              :key="item.dictValue"
              >{{ item.dictLabel }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="消息类型" class="min-width-32">
          <SendMessageSelect :modelValue.sync="queryParam.typeId" placeholder="请选择消息类型" noSkip />
        </a-form-item>
        <a-form-item label="发送时间">
          <a-date-picker v-model="queryParam.date" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div>
        <a-button v-has="'operations:createMessage'" type="primary" @click="handleCreate">新建消息</a-button>
        <span class="_ml-20 fw-6">短信剩余条数：{{ balance }}条（若需充值联系服务商）</span>
      </div>
      <CustomTable :name="$route.name" :columns="columns" :newColumns="newColumns" />
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id, enabled, title"
      :columns="newColumns"
      :data="loadData"
      :rowSelection="null"
      :rangPicker="range"
    >
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>

      <!-- 发送方式 -->
      <span slot="messageChannel" slot-scope="text, record">
        <DictTag
          :options="Dict.getLocal('messageChannelDict')"
          :value="record.messageChannelList.map((v) => v.messageChannel)"
          isText
          showBorder
        />
      </span>
      <!-- 发送结果 -->
      <span slot="result" slot-scope="text, record">
        {{ record.sendSuccessNum + '/' + record.totalNum }}
      </span>
      <!-- 阅读情况 -->
      <span slot="read" slot-scope="text, record">
        {{ record.readNum + '/' + record.totalNum }}
      </span>

      <!-- 操作 -->
      <span slot="action" slot-scope="text, record">
        <template>
          <a-button
            v-has="'operations:messageDetail'"
            type="primary"
            ghost
            size="small"
            @click="handleDetail(record)"
          >
            发送结果
          </a-button>
        </template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { MessageRecordList, MessageRecordFindBalance } from '@/api/operations/message'
import CustomTable from '@/components/Cuscolumn'
import SendMessageSelect from '@/views/operations/message/components/sendMessageSelect'
import DictTag from '@/components/DictTag'

export default {
  components: {
    STable,
    CustomTable,
    SendMessageSelect,
    DictTag,
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
      },
      queryParam: {
        messageChannel: undefined,
        typeId: [],
        sendStatus: undefined,
        date: undefined,
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px',
        },
        {
          title: '消息发送时间',
          dataIndex: 'sendTime',
          ellipsis: true,
          width: '160px',
        },
        {
          title: '消息类型',
          dataIndex: 'typeName',
          ellipsis: true,
          width: '120px',
        },
        {
          title: '消息标题',
          dataIndex: 'messageTitle',
          width: '200px',
        },
        {
          title: '发送方式',
          dataIndex: 'messageChannel',
          scopedSlots: { customRender: 'messageChannel' },
          width: '180px',
        },
        {
          title: '发送结果',
          scopedSlots: { customRender: 'result' },
          width: '90px',
        },
        {
          title: '阅读情况',
          scopedSlots: { customRender: 'read' },
          width: '90px',
        },
        {
          title: '发送人',
          dataIndex: 'sender',
          width: '120px',
        },
        {
          title: '操作',
          width: '90px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      range: null,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
        }
        let typeId = this.queryParam.typeId
        return MessageRecordList(
          Object.assign(params, this.queryParam, {
            typeId: typeId && typeId.length ? typeId[typeId.length - 1] : undefined,
          })
        )
          .then((res) => {
            if (res.code === 0) {
              this.pagination.current = parameter.pageNum
              this.pagination.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch((err) => {
            this.$message.error(err.msg)
          })
      },
      balance: 0,
    }
  },
  computed: {
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name]) {
        return this.$options
          .data()
          .columns.filter((v) => {
            const _items = currentColumns[this.$route.name].find((item) => item === v.title || item.title === v.title)
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    },
  },
  created() {
    this.getMessageRecordFindBalance()
  },
  methods: {
    // 重置
    handleReset() {
      this.queryParam = {
        messageChannel: undefined,
        typeId: [],
        sendStatus: undefined,
        date: undefined,
      }
      this.handleReload()
    },
    handleReload() {
      this.$refs.table.refresh()
    },
    handleCreate() {
      this.$store.commit('SET_SMSTEMPLATEOBJ', { ids: '', data: [] })
      this.$store.commit('SET_PAGESELECTEDOBJ', {
        1: [],
      })
      this.$router.push({
        path: '/operations/createMessage',
      })
    },
    // 详情
    handleDetail(row) {
      this.$router.push({
        path: '/operations/messageDetail',
        query: { row: JSON.stringify(row) },
      })
    },
    async getMessageRecordFindBalance() {
      let res = await MessageRecordFindBalance()
      this.balance = res.data || 0
    },
  },
}
</script>
<style scoped lang="less">
</style>